<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="../static/CSS/index.css" type="text/css" rel="stylesheet">
	<title>注册或登录</title>
	<!-- bootstrap -->
	<link href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- 引入jqury,bootsrapt都依赖jqury，必须放在前面 -->
	<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
	<!-- 引入cookie -->
	<script type="text/javascript" src="../static/js/jquery.cookie.js"></script>
	<!-- 引入js -->
	<script type="text/javascript" src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>
	<f:view>
		<iframe class="header" src="header.html"></iframe>
		<div class="row" style="background: #9BCD9B; margin-top: -20px;">
			<div class="col-md-8 col-md-offset-2">
				<br />
				<h4 style="color: #FF1493;">注册或登录</h4>
				<br />
			</div>
		</div>

		<div class="row" style="height:540px; ">
			<!-- LMP图标 -->
			<div class="col-md-4 col-md-offset-1"
				style="width:100%;height: 100%; top:100px;background:url('../static/images/login_bg.png') no-repeat;">

			</div>

			<div class="col-md-4 col-md-offset-7" style="top: -500px; background: #fff; border-radius: 5px;">
				<form class="form-horizontal" role="form">
					<div style="height: 50px;">
						<h2>登录系统</h2>
					</div>
					<div class="form-group">
						<span class="glyphicon glyphicon-user"></span>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="login_account" placeholder="请输入用户名"> <span
								class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<span class="glyphicon glyphicon-info-sign"></span>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="login_password" placeholder="请输入密码"> <span
								class="help-block"></span>

						</div>
					</div>
					<div class="form-group">
						<div class=" col-sm-10">
							<div class="checkbox">
								<label> <input type="checkbox" id="rember_account">记住账号
								</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class=" col-sm-offset-8 col-sm-10">
							<label><a href="register.html">立即注册</a> </label>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-offset-1 col-md-4">
							<button type="button" class="btn btn-primary" id="login_btn"
								style="width: 280px;">登录</button>
						</div>
					</div>
				</form>
			</div>

		</div>
		<iframe class="footer" src="footer.html"></iframe>
	</f:view>
	<script type="text/javascript">
		/* 保存cookies */
		//$.cookie("user_name", $("#"));  
		//显示校验的提示信息 
		/**
		ele 待校验元素，status 状态， msg，消息		
		 */
		function show_validate_msg(ele, status, msg) {
			if ("success" == status) {
				$(ele).parent().removeClass("has-error")
					.addClass("has-success");
				$(ele).next("span").text(msg);
			} else if ("error" == status) {
				$(ele).parent().removeClass("has-success")
					.addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		var url = 'http://121.41.228.3:8080';
		//点击登录按钮，进行查询，账号密码匹配，保存cookies 转到index 
		$("#login_btn").click(function () {

			if ($("#login_account").val() == "") {
				show_validate_msg("#login_account", "error", "用户名不能为空");
				return false;
			} else { show_validate_msg("#login_account", "success", ""); }
			if ($("#login_password").val() == "") {
				show_validate_msg("#login_password", "error", "密码不能为空");
				return false;
			}
			else { show_validate_msg("#login_password", "success", ""); }
			{
				//发送ajax请求，判断账号密码是否对应
				//alert("ok");
				var docName = $("#login_account").val();
				var docPassword = $("#login_password").val();
				//登录	  获取项目根目录
				$.ajax({
					url: url + "/login",
					type: "post",
					contentType: "application/json",
					headers: {
						Accept: "application/json",
					},
					dataType: "json",
					data: JSON.stringify({ "username": docName, "password": docPassword }),
					success: function (result) {
						//由于页面form中的 button 没有添加type=button 导致了点击按钮刷新页面，需要注意
						//登录提示
						console.log(result);
						alert(result.msg);
						//console.log(result);
						//判断是否保存当前账号
						//用户名存cookies
						if (result.code == 200) {
							//成功登录							
							//data
							var token = result.data;
							console.log(token);
							//存token
							//发ajax,根据docName去查用户的id，存cookie
							$.cookie("docName", docName, "token", token, { expires: 30 });
							//转到index
							window.location.replace("index.html");
						}

					}
				});

			}
		});


	</script>
</body>

</html>
